@use "scss/colors";
@use "scss/variables";
@use "scss/z-indices";

$border-radius: variables.$border-radius-lg;
$row-height: 40px;

// ------- <table/> --------
.table {
  width: 100%;
  border-spacing: 0;
  max-width: 100%;
  border-radius: $border-radius;
}

.thead {
  position: sticky;
  top: 0;
  z-index: z-indices.$tableScroll;
}

// --------- <th/> ---------
.th {
  text-align: left;
  width: auto;
  padding: variables.$spacing-md variables.$spacing-lg;
  white-space: nowrap;
  background-color: colors.$grey-50;
  border-top: variables.$border-thin solid colors.$grey-200;
}

// --------- <tr/> ---------

@mixin status-background-color($color, $hoverColor) {
  background-color: $color;

  &:hover {
    background-color: $hoverColor;
  }
}

.tr {
  @include status-background-color(colors.$foreground, colors.$grey-30);

  height: $row-height;

  &:hover > * > * {
    visibility: visible; // show hidden buttons in cells
  }

  &.emptyPlaceholder {
    height: 400px;

    &:hover {
      background-color: unset;
    }
  }

  &.removed {
    @include status-background-color(colors.$red-30, colors.$red-40);
  }

  &.added {
    @include status-background-color(colors.$green-30, colors.$green-50);
  }

  &.changed {
    @include status-background-color(colors.$blue-30, colors.$blue-40);
  }

  &.disabled {
    background-color: colors.$grey-50;
  }

  &.highlighted {
    animation: highlight 2s forwards;
  }

  @keyframes highlight {
    0%,
    50% {
      position: relative;
      box-shadow: variables.$box-shadow-highlight colors.$blue-200;
      z-index: 2;
    }

    99% {
      z-index: 2;
    }

    100% {
      box-shadow: 0 0 0 0 transparent;
      z-index: 0;
    }
  }
}

// --------- <td/> ---------
.td {
  padding: 0 variables.$spacing-lg;
  word-wrap: break-word;
}

.streamOrFieldNameCell {
  min-width: 200px;
  max-width: 0;
}

.syncModeCell {
  width: 20%;
  min-width: 270px;
}

.pkCell,
.cursorCell {
  width: 10%;
}

.amountOfFieldsCell {
  width: 5%;
}

// checkbox
.indeterminate {
  border-color: colors.$grey-400;
  background-color: colors.$grey-400;
}

.searchInputContainer {
  min-width: variables.$width-search-bar;
}
